<template>
	<view>
		<button class="magic-block" :style="styleInfo" plain="true" :open-type="showContact ? 'contact' : ''" show-message-card="true" @click="doEvent" >
			<img v-if="pic" :src="pic">
			<view v-if="font && font.text" class="text" :style="'color:'+(font.color || '#000000')+';font-size:'+(font.size || 16)+'px;'">{{font.text}}</view>
		</button>
		<Share v-if="showShare" :datas="datas" @close="showShare=false"></Share>
		<Sku v-if="showSku" :spec="datas.spec" :spec_data="datas.spec_data" @close="showSku=false" @confirm="skuConfirm"></Sku>
		<Login v-if="showLogin"></Login>
		<view class="alert" v-if="showPostForm">
			<view class="main">
				<view class="icon bianji"></view>
				<view style="margin-top: 60upx;"></view>
				<PostForm :form_id="datas.order_form_id" @close="showPostForm=false" :button="true" @onFormSubmit="showPostForm=false;postOrder($event)"></PostForm>
			</view>
		</view>
	</view>
</template>

<script>
import Sku from '@/components/sku'
import Share from "@/components/share"
import Login from "@/components/login"
import PostForm from "@/components/postForm"
export default {
	components: {
		Sku,
		Share,
		Login,
		PostForm
	},
	props: {
		config : {
			type : Object,
			default : {top:50,left:50,width:30,height:20,radius:10,background:'#ff0000'}
		},
		datas : Object,
		float: Boolean,
		event: String,
		pic: String,
		font: {
			type : Object,
			default : {text:'',size:24,color:'#000000'}
		}
	},
	data() {
		return {
			styleInfo : '',
			info : 0,
			showSku : false,
			isLogin : false,
			showShare : false,
			showLogin : false,
			showContact : false,
			showPostForm : false
		}
	},
	mounted() {
		let that = this
		uni.getSystemInfo({
			success: function (res) {
				that.info = res
			}
		})
		uni.$once('loginClick',function(){
			that.showLogin = true
		})
		if(uni.getStorageSync('token')){
			this.isLogin = true
			this.showLogin = false
		}
		if(this.event && this.event.indexOf('contact') > -1){
			this.showContact = true
		}
		this.styleInfo = this.getStyle()
	},
	methods: {
		getStyle (){
			let style = `
				top:calc(`+(this.config.top-(this.config.height/2*this.info.windowWidth/this.info.windowHeight))+`%);
				left:`+(this.config.left-this.config.width/2)+`%;
				width:`+this.config.width+`vw;
				height:`+this.config.height+`vw;
				border-radius:`+this.config.radius/100*(this.config.width/100*this.info.windowWidth)+`px;
			`
			style += this.config.background ? 'background: '+this.config.background+';' : ''
			style += this.float ? 'position: fixed;' : 'position:absolute;'
			return style
		},
		doEvent(){
			if(this.event.indexOf('goto') > -1){
				let reg = /[^\(\)]+(?=\))/g
				let url = this.event.match(reg)
				this.$goto(url[0])
			}else if(this.event.indexOf('share') > -1){
				if(this.isLogin){
					this.showShare = !this.showShare
				}else{
					this.showLogin = true
				}
			}else if(this.event.indexOf('login') > -1){
				this.showLogin = !this.showLogin
			}else if(this.event.indexOf('order') > -1){
				if(this.isLogin){
					if(this.datas.spec_data && this.datas.spec_data.length > 1){
						this.showSku = true
					}else{
						this.postOrder()
					}
				}else{
					this.showLogin = true
				}
			}else if(this.event.indexOf('favorite') > -1){
				this.toFavorite()
			}else if(this.event.indexOf('contact') > -1){
			
			}else if(this.event.indexOf('back') > -1){
				uni.navigateBack()
			}
		},
		skuConfirm(spec_index){
			this.datas.spec_index = spec_index
			this.showSku = false
			this.postOrder()
		},
		async postOrder(form){
			let order_product = [{product_id:this.datas.id}]
			if(this.datas.spec_index > -1){
				order_product[0].spec_index = this.datas.spec_index
			}
			if(this.datas.order_form_id > 0){
				if(form){
					order_product[0].form = form
					await this.$api('POST','order',{order_product:order_product})
				}else{
					this.showPostForm = true
				}
			}else{
				await this.$api('POST','order',{order_product:order_product})
			}
		},
		async toFavorite(){
			if(this.datas){
				this.datas.favorite = await this.$api('POST','favorite',{id:this.datas.id})
			}
		}
	}
}
</script>

<style lang='scss'>
	.magic-block {
		border: 0;
		padding: 0;
		margin: 0;
		z-index: 99;
		display: flex;
		align-items: center;
		font-size: 26upx;
		color: #ffffff;
		text-align: center;
		overflow:hidden;
		img{
			width: 100%;
			height: 100%;
		}
		.text{
			width: 100%;
			text-align: center;
		}
	}
	.magic-block[plain] {
	  border: none;
	}
	.alert {
		z-index: 198;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		background: rgba(0, 0, 0, 0.4);
		.main {
			z-index: 199;
			position: relative;
			flex-direction: column;
			align-items: center;
			padding: 30upx 10upx;
			border-radius: 12upx;
			width: 90%;
			max-height: 80%;
			background: #ffffff;
			.icon {
				position: absolute;
				left: calc(50% - 60upx);
				top: -60upx;
				font-size: 100upx;
				background: #ffffff;
				color: $uni-color-primary;
				border-radius: 70upx;
				padding: 20upx;
			}
		}
	}
</style>